<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片修图价格计算器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .input-group {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
        }
        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 150px;
        }
        .price-discount {
            margin-left: 10px;
            font-size: 14px;
            color: #e74c3c;
        }
        .results {
            margin-top: 30px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 8px;
            border-left: 4px solid #4CAF50;
        }
        .result-item {
            margin-bottom: 10px;
            padding: 10px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .highlight {
            font-weight: bold;
            color: #4CAF50;
        }
        .note {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>照片修图价格计算器</h1>
        
        <div class="input-group">
            <label for="refinedPrice">精修单价:</label>
            <input type="number" id="refinedPrice" min="0" step="0.01" value="88">
            <span class="note">元/张</span>
            <span id="refinedPriceDiscount" class="price-discount">(10折)</span>
        </div>
        
        <div class="input-group">
            <label for="refinedCount">精修张数:</label>
            <input type="number" id="refinedCount" min="0" step="1" value="0">
            <span class="note">张</span>
        </div>
        
        <div class="input-group">
            <label for="basicPrice">初修单价:</label>
            <input type="number" id="basicPrice" min="0" step="0.01" value="68">
            <span class="note">元/张</span>
            <span id="basicPriceDiscount" class="price-discount">(10折)</span>
        </div>
        
        <div class="input-group">
            <label for="basicCount">初修张数:</label>
            <input type="number" id="basicCount" min="0" step="1" value="0">
            <span class="note">张</span>
        </div>
        
        <div class="input-group">
            <label for="finalPrice">最终价格:</label>
            <input type="number" id="finalPrice" min="0" step="0.01" value="0">
            <span class="note">元</span>
        </div>
        
        <div class="results">
            <h3>计算结果</h3>
            <div class="result-item">
                <div>标准价格: <span id="standardResult" class="highlight">0.00</span> 元</div>
                <div class="note">按照固定精修单价88元和初修单价68元计算</div>
            </div>
            <div class="result-item">
                <div>实际价格: <span id="actualResult" class="highlight">0.00</span> 元</div>
                <div class="note">按照当前输入的单价和张数计算</div>
            </div>
            <div class="result-item">
                <div>总折扣率: <span id="discountRate" class="highlight">100.00%</span></div>
                <div class="note">实际价格相比标准价格的折扣比例</div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 标准单价
            const STANDARD_REFINED_PRICE = 88;
            const STANDARD_BASIC_PRICE = 68;
            
            // 初始化计算
            calculatePrices();
            updateDiscountLabels();
            
            // 绑定输入事件
            $("#refinedPrice, #refinedCount, #basicPrice, #basicCount").on('input', function() {
                // 当用户修改了精修单价，自动更新初修单价
                if($(this).attr('id') === 'refinedPrice') {
                    updateBasicPrice();
                }
                calculatePrices();
                updateDiscountLabels();
            });
            
            // 当用户输入最终价格时反推单价
            $("#finalPrice").on('input', function() {
                reverseCalculate();
                updateDiscountLabels();
            });
            
            // 更新折扣率标签
            function updateDiscountLabels() {
                let refinedPrice = parseFloat($("#refinedPrice").val()) || 0;
                let basicPrice = parseFloat($("#basicPrice").val()) || 0;
                
                let refinedDiscount = (refinedPrice / STANDARD_REFINED_PRICE * 10).toFixed(1);
                let basicDiscount = (basicPrice / STANDARD_BASIC_PRICE * 10).toFixed(1);
                
                $("#refinedPriceDiscount").text("(" + refinedDiscount + "折)");
                $("#basicPriceDiscount").text("(" + basicDiscount + "折)");
            }
            
            // 更新初修单价为精修单价的77.27%
            function updateBasicPrice() {
                let refinedPrice = parseFloat($("#refinedPrice").val()) || 0;
                let basicPrice = (refinedPrice * 0.7727).toFixed(2);
                $("#basicPrice").val(basicPrice);
            }
            
            // 计算价格
            function calculatePrices() {
                let refinedPrice = parseFloat($("#refinedPrice").val()) || 0;
                let refinedCount = parseInt($("#refinedCount").val()) || 0;
                let basicPrice = parseFloat($("#basicPrice").val()) || 0;
                let basicCount = parseInt($("#basicCount").val()) || 0;
                
                // 计算标准价格（固定单价）
                let standardPrice = (STANDARD_REFINED_PRICE * refinedCount) + (STANDARD_BASIC_PRICE * basicCount);
                $("#standardResult").text(standardPrice.toFixed(2));
                
                // 计算实际价格（用户输入单价）
                let actualPrice = (refinedPrice * refinedCount) + (basicPrice * basicCount);
                $("#actualResult").text(actualPrice.toFixed(2));
                $("#finalPrice").val(actualPrice.toFixed(2));
                
                // 计算折扣率
                let discountRate = standardPrice === 0 ? 100 : (actualPrice / standardPrice * 100);
                $("#discountRate").text(discountRate.toFixed(2) + "%");
            }
            
            // 根据最终价格反推单价
            function reverseCalculate() {
                let finalPrice = parseFloat($("#finalPrice").val()) || 0;
                let refinedCount = parseInt($("#refinedCount").val()) || 0;
                let basicCount = parseInt($("#basicCount").val()) || 0;
                
                // 避免除以零错误
                if (refinedCount === 0 && basicCount === 0) {
                    return;
                }
                
                // 按照比例分配价格
                // 假设精修单价 = x，则初修单价 = 0.7727x
                // 总价 = refinedCount * x + basicCount * 0.7727x
                // 解方程: x = 总价 / (refinedCount + 0.7727 * basicCount)
                
                let x = finalPrice / (refinedCount + 0.7727 * basicCount);
                
                if (!isNaN(x) && isFinite(x)) {
                    let refinedPrice = x.toFixed(2);
                    let basicPrice = (x * 0.7727).toFixed(2);
                    
                    $("#refinedPrice").val(refinedPrice);
                    $("#basicPrice").val(basicPrice);
                    
                    // 更新标准价格和折扣率
                    let standardPrice = (STANDARD_REFINED_PRICE * refinedCount) + (STANDARD_BASIC_PRICE * basicCount);
                    $("#standardResult").text(standardPrice.toFixed(2));
                    
                    let discountRate = standardPrice === 0 ? 100 : (finalPrice / standardPrice * 100);
                    $("#discountRate").text(discountRate.toFixed(2) + "%");
                    
                    $("#actualResult").text(finalPrice.toFixed(2));
                }
            }
        });
    </script>
</body>
</html>